<template>
    <div class="bg">
        <nav-com title="我的订单" :showView='showView' @back="backHandler()"></nav-com>
        <van-tabs color="#FF6F4E" @click="childActive(active)" title-active-color="#FF6F4E" v-model="active">
            <van-pull-refresh v-model = 'isLoading' @refresh='onRefresh'>
            <van-tab v-for="(item,index) in tabList" :key="index" :title="item.title">
                <div v-if='list.length == 0' class="empty">
                    <img src='../../assets/t4.png'>
                    <p>您还没有订单记录哦~</p>
                </div>
                <div v-else v-for="(item,index) in list" :key="index" class="orders_list">
                    <div class="order_box_title">订单号：{{item.outTradeNo}}</div>
                    <div class="order_box">
                        <img :src="item.picUrl">
                        <div>
                            <p>{{item.goodsDetail}}</p>
                            <span>￥{{item.payPrice}}</span>
                        </div>
                    </div>
                    <div class="order_bottom">下单时间：{{item.payTime}}</div>
                    <div v-if="item.status == 2 " @click='confirmHanlder(item.id)' class="order_ab">确认收货</div>
                    <div v-if="item.status == 1 " @click="selfOrderaHandler(item.id)" class="order_ab">已自提</div>
                </div>
            </van-tab>
            </van-pull-refresh>
        </van-tabs>
    </div>
</template>
<script>
import { getOrders,putOrders,putselfWithdrawal} from '@/api/api'
import navCom from '@/component/nav'
export default {
    name:'orders',
    components:{
        navCom
    },
    data() {
        return {
            uid: weixin.getUserId(),
            showView:true,
            active:0,
            tabList:[
                {id:1,title:'待发货'},
                {id:2,title:'待收货'},
                {id:3,title:'已完成'},
            ],
            list:[],
            isLoading:false,
        }
    },
    mounted(){
        this.init()
        
    },
    methods:{
        //返回
        backHandler(){
            this.$router.go(-1)
        },
        onRefresh(){
            if(this.active == 0){
                this.getDataHanlder(1)
            }else if(this.active == 1){
                this.getDataHanlder(2)
            }else if(this.active == 2){
                this.getDataHanlder(4)
            }
            
            this.isLoading = false
        },
        //初始化
        init(){
            this.getDataHanlder(1)
        },
        //获取数据
        getDataHanlder(status){
            let data = {
                uid:this.uid,
                status:status
            }
            data.goodsTypeList = 'zj4399,zj4799,zj4999,zj2w,zj3w,v15p4199,i18p4899,v16p4399,k9p6499,vk19p5999'
            getOrders(data).then(res=>{
                if(res.data.code==200){
                    this.list = res.data.data.rows
                }else {
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
        },
        //切换
        childActive(val){
            
            if(val == 0){
                this.getDataHanlder(1)
            }else if(val == 1){
                this.getDataHanlder(2)
            }else if(val == 2){
                this.getDataHanlder(4)
            }
        },
        //已自提
        selfOrderaHandler(id){
            putselfWithdrawal({id:id}).then(res=>{
                if(res.data.code == 200){
                    this.getDataHanlder(1)
                    this.$dialog.alert({
                        message:'恭喜您，收到货物啦~'
                    })
                }else {
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
        },
        //确认收货
        confirmHanlder(id){
            putOrders({id:id}).then(res=>{
                if(res.data.code == 200){
                    this.getDataHanlder(2)
                    this.$dialog.alert({
                        message:'恭喜您，收到货物啦~'
                    })
                }else {
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
        },
    }
}
</script>
<style scoped>
p {padding:0; margin:0;}
.bg {background: #F1F3F6; min-height: 100vh;}
.orders_list {background:#fff; position: relative; margin:4vw;}
.order_box_title {height:9.3vw; font-size:3.2vw; padding-left:2.93vw; line-height:9.3vw; color:#999;  border-bottom:1px solid #e8e8e8;}
.order_box { display:flex;}
.order_box img {width:24vw; height:24vw; padding-top:3.3vw; padding-left:2.93vw;}
.order_box p {padding-left:4vw; padding-top:3.3vw; color:#333;}
.order_box span {padding-left:4vw; padding-top:14vw; display: block; color:#FF0000; font-size:5vw;}
.order_bottom {padding:3.3vw 2.93vw; color:#999;}
.order_ab {position:absolute; right:4vw; bottom:10vw; width:22.66vw; height:8vw; line-height: 8vw; text-align: center; border-radius: 1.3vw; background:#FF6F4E; color:#fff;}
.empty {margin-top:29.33vw; text-align: center;}
.empty img {width:54.4vw; height:37.6vw;}
.empty p {font-size:3vw; color:#333; margin-top:4vw;}
</style>